@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary-color: #ff4d8c;  /* 主粉色 */
  --primary-hover: #ff3377;  /* 悬停时的深粉色 */
}

@layer base {
  :root {
    --foreground-rgb: 0, 0, 0;
    --background-rgb: 255, 255, 255;
  }

  body {
    color: rgb(var(--foreground-rgb));
    background: rgb(var(--background-rgb));
  }
}

@layer components {
  .btn-primary {
    @apply bg-[#ff4d8c] text-white hover:bg-[#ff3377] transition-colors;
  }
  
  .container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .card {
    @apply bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow;
  }

  .input {
    @apply w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent;
  }

  .gradient-bg {
    @apply bg-gradient-to-br from-pink-gradient-start to-pink-gradient-end;
  }

  .hover-pink {
    @apply hover:text-primary transition-colors;
  }

  .border-pink {
    @apply border-primary;
  }

  .text-primary {
    @apply text-[#ff4d8c];
  }

  .bg-primary {
    @apply bg-[#ff4d8c];
  }
}

/* 隐藏滚动条但保持功能 */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}
